<template>
  <div>
    <div class="container-fluid bg-f7 mb-5">
      <div class="row pt-5 bg-f7">
        <div class="col-md-12 top-box text-center mb-5">
          <div class="fs-18">金牌专业</div>
          <div class="fs-30">PRODUCT CENTER</div>
          <div class="line-box d-flex j-center">
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="container pb-5">
          <div class="row major-list">
              <div class="col-md-4 major-box">
                <router-link :to="{name: 'MajorDetail', query: {id: 0}}" tag="div">
                  <img src="../assets/images/18.png" class="img-responsive w-100" alt />
                  <span class="fs-24 color-white">新媒体</span>
                </router-link>
              </div>
            <div class="col-md-4 major-box">
              <router-link :to="{name: 'MajorDetail', query: {id: 1}}" tag="div">
                <img src="../assets/images/19.png" class="img-responsive w-100" alt />
                <span class="fs-24 color-white">新文旅</span>
              </router-link>
            </div>
            <div class="col-md-4 major-box">
              <router-link to="/international" tag="div">
                <img src="../assets/images/20.png" class="img-responsive w-100" alt />
                <span class="fs-24 color-white">中日国际班</span>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  
};
</script>

<style lang="scss">
@import "../assets/scss/style.scss";

@media screen and (max-width: 768px) {
  .major-list {
    margin-left: 0 !important;
    margin-right: 0 !important;
    .major-box {
      margin-bottom: 0.9375rem;
    }
  }
}

.major-box {
  cursor: pointer;
}

.content {
    background: map-get($colors, 'f7f');
    .col-md-12  span {
        color: map-get($colors, 'blue');
    }
}
</style>